React - 4 Redux

发表于 | 分类于 | | 阅读次数:
字数统计: 547 | 阅读时长 ≈ 2

Redux：数据层框架

概念

image-20190417125714838

Redux = Reducer + Flux(数据存储框架，过时了)

将组件中的数据放在一个公用存储区域去存储，组件改变数据，其他组件会感知Redux的改变，再去取数据更新组件。

工作流程

image-20190417130023080

react component：借书的用户

action creators：那句话”我要借什么书”

store：图书馆管理员

reducers：管理员的记录本

借书的人说”要借什么书”，图书馆管理员去查阅记录本，记录本上显示这本书在哪里，根据书的位置找到书，并给借书人。

Store的创建

引入：yarn add redux

  • 创建reducer，把reducer传递给创建store的函数
  • 使用reducer作为参数，创建store的时候，(创建管理员的时候要把记录本给他 )

Action和reducer的编写

主动改变：

  • 方法内现写action要做什么的那句话(对象)

  • 将action传递给store

    1
    store.dispatch(action);

  • store不操作，将action传递给reducer，

    • reducer中判断type
    • 深拷贝原来的state为newState，更新newState
    • 返回newState给store

  • store接受后会替换之前的state

Store数据发生改变的时候，组件会感知改变，重新取数据，更新组件内容

1
2
3
4
5
6
7
8
// 组件去订阅store
this.handleBtnClick = this.handleBtnClick.bind(this);
store.subscribe(this.hanleStoreChange);

    //store同步：感知到变化的时候，调用store.getState()重新取数据，再用setState更新组件内容
    hanleStoreChange(){
        this.setState(store.getState());
    }

删除功能

ActionTypes的拆分

常量写错了会报异常，字符串不会报异常。方便找出bug

使用actionCreators统一创建action

自动化测试，有利于代码维护

AntD的css

Redux知识点

Redux设计和使用的三大原则

  • store是唯一的
  • 只有store只有自己能够改变自己的内容
  • Reducer必须是个纯函数：
    • 给定固定的输入，
    • 会有固定的输出，(不能有异步操作、不能有和时间相关的操作)
    • 且不会有任何副作用(不能修改参数)

Redux的核心API

  • createStore 创建store
  • store.dispatch 派发action，传递给store
  • store.getState 获取store中所有数据内容
  • store.subscribe 订阅store的改变。只要store改变，其接收的回调函数就会被执行